<h3>Angular 5 3rd Party Controls</h3>
<form>

  <div class="form-group">
    <button type="button" class="btn" [ngClass]="{'btn-primary': onOffSwitch === 'On'}" name="onOffSwitch" [(ngModel)]="onOffSwitch"
      btnCheckbox btnCheckboxTrue="On" btnCheckboxFalse="Off">
      {{ onOffSwitch }}
    </button>
  </div>

  <div class="btn-group">
    <label class="btn btn-primary" name="taxType" [(ngModel)]="taxType" btnRadio="W2">
      Type W2
    </label>
    <label class="btn btn-primary" name="taxType" [(ngModel)]="taxType" btnRadio="1099">
      Type 1099
    </label>
    <label class="btn btn-primary" name="taxType" [(ngModel)]="taxType" btnRadio="Other">
      Other Type
    </label>
  </div>
  <h3>{{ taxType }}</h3>

  <div class="form-group">
    <timepicker name="startTime" [(ngModel)]="startTime" [minuteStep]="15">
    </timepicker>
  </div>

  <div class="form-group" style="display: inline-block;">
    <input type="text" class="form-control" [minDate]="minDate" [maxDate]="maxDate" #dp="bsDatepicker" bsDatepicker [(bsValue)]="bsValue">
  </div>

  <div class="form-group">
    <rating name="postRating" [(ngModel)]="postRating" [max]="10" (onHover)="hover($event)" (onLeave)="leave($event)">
    </rating>
  </div>
  <h3>{{ postRating }}</h3>

</form>
